<template>
  <div class="login">
    <img src="/static/login/bg02.jpg" alt="" class="login_bg" />
    <el-form
      ref="resetForm"
      :model="resetForm"
      :rules="rules"
      class="login_form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title" style="text-align:center;">忘记密码</h3>
      </div>

      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="resetForm.username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
          prefix-icon="el-icon-user"
        />
      </el-form-item>
      <el-form-item
        prop="uEmail"
      >
        <el-input prefix-icon="el-icon-position" style="width:70%;" v-model="resetForm.uEmail" placeholder="请输入邮箱"></el-input>
        <span v-show="show" class="sendTestCode">
          <a id="loginBtn" @click="sendCode()">发送验证码</a>
        </span>
        <span v-show="!show" class="sendTestCode">
          <a id="loginBtn">{{ count }} s</a>
        </span>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入验证码" v-model="resetForm.code" prefix-icon="el-icon-chat-dot-round" @change="checkCode(resetForm.uEmail,resetForm.code)"></el-input>

      </el-form-item>
      <el-button
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="toRegister(resetForm)"
        >重置密码</el-button
      >
      <div class="form_bottom">
        <router-link to="/login"><span>想起密码？快去登录</span></router-link>
      </div>
    </el-form>
  </div>
</template>
<script>
import { isvalidUsername, isvalidPass } from '../../utils/validate'
export default {
  name: 'Login',
  data () {
    var validUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!isvalidUsername(value)) {
        callback(
          new Error(
            '用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符'
          )
        )
      } else {
        // return true
        callback();
      }
    }
    return {
      show: true,
      count: "",
      timer: null,
      resetForm: {
        username: '',
        uEmail: '',
        code: ''
      },
      rules: {
        username: [
          { required: true, validator: validUsername, trigger: 'blur' }
        ],
        uEmail:[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}
        ]

      },
      isCheckCode:false
    }
  },
  created () {
    console.log(this.token)
  },
  methods: {
    checkCode(email,code){
      var params = {}
      params.email = email
      params.code = code
      this.$axios.checkCode(params).then(res=>{
        console.log(res)
        if(res.message!=null){
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }else{
          this.isCheckCode = true
        }
      })
    },
    sendCode() {
      this.$refs.resetForm.validate(valid => {
        console.log(valid)
        if(valid){
          const TIME_COUNT = 60;
          // 倒数60秒
          console.log(this.timer)
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
            var params = {}
            params.uEmail = this.resetForm.uEmail
            this.$axios.sendCode(params).then(res=>{
              console.log(res)
            })
          }else{
            this.show = true;
          }
        }
      })

    },
    // 找回密码
    toRegister (form) {
      console.log(form)
      var params = {}
      params.form = form
      this.$refs.resetForm.validate(valid => {
        console.log(valid)
        if(valid){
          this.checkCode(form.uEmail,form.code)
          if(this.isCheckCode==true){
            this.$axios.resetPwd(form).then(res=>{
              console.log(res)
              this.$notify({
                title: '成功',
                message: res.message+"："+res.data,
                type: 'success'
              });
              this.resetForm = {}
              clearInterval(this.timer);
              this.show = true
            })
          }

        }
      })
    }
  }
}
</script>
<style scoped>
.login {
  position: relative;
}
.login_bg {
  width: 100%;
  height: 600px;
}
.login_form {
  position: absolute;
  right: 10%;
  top: 5%;
  width: 300px;
  height: 350px;
  background-color: #ffffff96;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 40px;
  border-radius: 10px;
}
.form_bottom {
  display: flex;
  justify-content: space-between;
}
.form_bottom span {
  color: #409eff;
}
.sendTestCode {
  width: 25%;
  text-align: center;
  display: inline-block;
  /* background-color: red; */
  cursor: pointer;
}
</style>
